<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统 Jquery 版</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script src="api.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <header>
        <button><span></span><span></span><span></span></button>
        <div class="logo"><img src="logo.png" alt=""></div>
        <span>渡</span>
        <span>一</span>
        <span>教</span>
        <span>育</span>
        <ul>
            <li>学生列表</li>
            <li>新增学生</li>
            <li>统计图表</li>
        </ul>
    </header>
    <div class="body">
        <div class="nav-list">
            <dl>
                <dt>学生管理</dt>
                <dd class="active">学生列表</dd>
                <dd>新增学生</dd>
                <dd>统计图表</dd>
            </dl>
        </div>
        <div class="content">
            <div class="stu-list">
                <div class="search-box">
                    <select class="order-item">
                        <option value="sNo">学号</option>
                        <option value="name">姓名</option>
                        <option value="sex">性别</option>
                        <option value="email">邮箱</option>
                        <option value="age">年龄</option>
                        <option value="phone">手机号</option>
                        <option value="address">地址</option>
                    </select>
                    <input type="text" class="search-inp" placeholder="请输入您要搜索的内容">
                    <button class="search-btn">搜索</button>
                    <button class="back-btn">返回</button>
                    <button class="add-random-btn" style="background-color: #409eff;">随机新增</button>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>年龄</th>
                            <th>手机号</th>
                            <th>地址</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>001</td>
                            <td>进进</td>
                            <td>女</td>
                            <td>sjdf@163.com</td>
                            <td>23</td>
                            <td>15555555555</td>
                            <td>扶风</td>
                            <td>
                                <button data-id="0" class="edit-btn">编辑</button>
                                <button data-id="0" class="del-btn">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul class="pagination"></ul>
            </div>
            <div class="stu-add">
                <form action="/add-stu" class="add-form">
                    <div class="form-item">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" placeholder="请填写姓名">
                    </div>
                    <div class="form-item">
                        <label>性别</label>
                        <label>男<input type="radio" checked name="sex" value="男"></label>
                        <label>女<input type="radio" name="sex" value="女"></label>
                    </div>
                    <div class="form-item">
                        <label for="email">邮箱</label>
                        <input type="text" id="email" name="email" placeholder="请填写邮箱">
                    </div>
                    <div class="form-item">
                        <label for="age">年龄</label>
                        <input type="text" id="age" name="age" placeholder="请填写年龄">
                    </div>
                    <div class="form-item">
                        <label for="phone">手机号</label>
                        <input type="text" id="phone" name="phone" placeholder="请填写手机号">
                    </div>
                    <div class="form-item">
                        <label for="address">地址</label>
                        <input type="text" id="address" name="address" placeholder="请填写地址">
                    </div>
                    <div class="form-item">
                        <button class="submit-btn">提交</button>
                        <button class="reset-btn">重置</button>
                    </div>
                </form>
                <div class="tips">提示语</div>
            </div>
            <div class="stu-charts">
                <div class="address-chart"></div>
                <div class="sex-chart"></div>
            </div>
        </div>
    </div>
    <div class="mask">
        <form action="/edit-stu" class="edit-form">
            <div class="form-item">
                <label for="edit-name">姓名</label>
                <input type="text" id="edit-name" name="name">
            </div>
            <div class="form-item">
                <label>性别</label>
                <label>男<input type="radio" checked name="sex" value="男"></label>
                <label>女<input type="radio" name="sex" value="女"></label>
            </div>
            <div class="form-item">
                <label for="edit-email">邮箱</label>
                <input type="text" id="edit-email" name="email">
            </div>
            <div class="form-item">
                <label for="edit-age">年龄</label>
                <input type="text" id="edit-age" name="age">
            </div>
            <div class="form-item">
                <label for="edit-phone">手机号</label>
                <input type="text" id="edit-phone" name="phone">
            </div>
            <div class="form-item">
                <label for="edit-address">地址</label>
                <input type="text" id="edit-address" name="address">
            </div>
            <div class="form-item">
                <button data-id="0" class="change-btn">确认修改</button>
                <button class="cancel-btn">取消</button>
            </div>
        </form>
    </div>
</body>
</html>